<template>
  <div class="w750">
    <!-- 领红包 -->
    <div class="rec-bg"><img src="../../assets/images/password-coupon.jpg" alt=""></div>
    <div class="rec-packet" v-if="$route.query.getType == 'shop'">
      <div class="item">
        <input type="text" class="item-input" v-model="couponPwd" placeholder="请输入平台优惠券卡密号">
      </div>
      <div class="item">
        <input type="text" class="item-input" v-model="verifyCode" placeholder="请输入图片验证码">
        <a href="javascript:;" class="img-code"><img :src=piccodeSrc alt="" @click="changePicCode"></a>
      </div>
    </div>
    <div class="b-btn" :class="themes.theme" v-if="$route.query.getType == 'shop'"><a href="javascript:;" class="btn-r" @click="GetCoupon">立即领取</a></div>
    <!-- /领红包 -->
    <!-- 领优惠券 -->
    <div class="rec-packet" v-if="$route.query.getType == 'platform'">
      <div class="item">
        <input type="text" class="item-input" v-model="couponPwd" placeholder="请输入平台红包卡密号">
      </div>
      <div class="item">
        <input type="text" class="item-input" v-model="verifyCode" placeholder="请输入图片验证码">
        <a href="javascript:;" class="img-code"><img :src=piccodeSrc alt="" @click="changePicCode"></a>
      </div>
    </div>
    <div class="b-btn" :class="themes.theme" v-if="$route.query.getType == 'platform'"><a href="javascript:;" class="btn-r" @click="GetCoupon">立即领取</a></div>
    <!-- /领优惠券 -->
  </div>
</template>

<script>
  import { activateCoupon } from "api/coupon";
  import { Swipe , SwipeItem  , NavBar , List } from "vant";
  import config from 'config/config';
  import {mapState} from 'vuex'
  export default {
    components: {
      NavBar
    },
    data() {
      return {
         
        piccodeSrc:'',    //图片验证码地址
        couPro:this.$route.query.getType,    //提供方
        couponPwd:'',    //卡密
        verifyCode:'',    //验证码
      };
    },

    watch: {

    },
    mounted() {
      let that = this

      this.changePicCode();
    },

    methods: {

      //改变图形验证码
      changePicCode() {
        this.piccodeSrc = config.server + '/validCoderRandom?source=app&d='+new Date().getTime()+'';
        this.verifyCode = "";
      },

      //领取优惠券
      GetCoupon() {
        let that = this;
        activateCoupon({couPro: this.couPro,couponPwd: this.couponPwd, verifyCode: this.verifyCode}).then( res => {
          if(res.status == 1) {
            that.$dialog.confirm({
              title: '领取成功',
              message: '您已经领取成功，是否还要继续领取？'
            }).then(() => {
                //把卡密和验证码置空
                that.couponPwd = "";
                that.verifyCode = "";

                //切换验证码
                that.changePicCode();
            }).catch(() => {
              if(that.couPro == "platform"){//说明是红包
                that.$router.push('/myRed')
              } else{//说明是优惠券
                that.$router.push('/myCoupon')
              }
            });
          }else {
            this.$toast(res.msg);
            that.changePicCode();
          }
        })
      }
    },
    computed: {
      ...mapState(['themes']),
    }
  };
</script>


<style src="../../assets/css/get-coupons.css" scoped></style>